<template>
  <ul class="list">
    <li v-for="item of letters" :key="item" @click="handleLetterClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" :ref="item">{{item}}
    </li>
  </ul>
</template>
<script>
  export default {
    props: {
      cities: Object
    },
    name: 'CityAlphabet',
    data() {
      return {
        touchStatus: false  , //定义标识位
        startY:0,
        timer:null //函数节流
      }
    },
    updated(){
      this.startY=this.$refs['A'][0].offsetTop
    },
    computed: {
      letters() {
        const letters = []
        for (let i in this.cities) {
          letters.push(i)
        }
        return letters
      }
    },
    methods: {
      handleLetterClick(e) {  //e  点击某个字母事件的方法接收一个e的事件对象
        //console.log(e.target.innerText)
        //将子组件的传给父组件通过 $emit 事件触发  向外触发事件
        this.$emit("change", e.target.innerText)
      },
      handleTouchStart() {
        this.touchStatus = true
      },
      handleTouchMove(e) {
        if (this.touchStatus) {
          if(this.timer){
            clearTimeout(this.timer)
          }
          this.timer=setTimeout(()=>{
            const touchY=e.touches[0].clientY-79
            const index=Math.floor((touchY-this.startY)/24)
            console.log(index)
            if(index >= 0 && index<this.letters.length){
              this.$emit('change',this.letters[index])
            }
          },16)
        }
      },
      handleTouchEnd() {
        this.touchStatus = false
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../static/css/varibles.styl"
  .list
    width: 0.4rem
    position: absolute
    top: 1.58rem
    right: 0.05rem
    bottom: 0
    display: flex
    flex-direction: column
    justify-content: center
    & li
      text-align: center
      padding: 0.1rem 0
      color: $bgColr
</style>
